<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" :placeholder="true" :fixed="true" />

       
        <!-- 功能栏 -->
        <div>
            <van-dropdown-menu title="任务选择" active-color="#1989fa">
                <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
            </van-dropdown-menu>
        </div>
        <!-- 输入框 -->
        <div>
            <van-field v-model="content" rows="5" autosize label="答疑评论：" type="textarea" maxlength="350"
                placeholder="请输入评论" show-word-limit />
            <van-cell title="添加评论" is-link @click="addDiscuss" />
        </div>
        <div>
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                评论内容
            </van-divider>
        </div>







        <div class="van-card bigcard" v-for="(item, index) in discusses">
            <div>
                <div class="van-card__header">
                    <div class="avatar">
                        <van-image round width="40px" height="40px" :src="`/api/getImg?url=${item.userAvatar}`" />
                    </div>


                    <div class="van-card__content">
                        <div>
                            <div class="van-card__title van-multi-ellipsis--l2">
                                <h3>{{ item.userNick }}</h3>
                            </div>
                            <div class="van-card__desc van-ellipsis">{{ item.content }}</div>
                        </div>
                        <div class="van-card__bottom">
                            <div class="van-card__price">
                                <div><span class="van-card__price-currency">{{ item.createTime }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="van-card__footer">
                    <van-tag @click="intoComm(item.id)" type="primary">回复</van-tag>
                    <van-tag type=""></van-tag>
                    <van-tag @click="deleteOut(item.id)" v-if="userId == item.relationStudentId" type="danger">删除
                    </van-tag>
                </div>
            </div>

            <div v-for="(items, index) in item.comments" style="margin-left:20px;">
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                </van-divider>
                <div class="van-card__header">  
                    <div class="avatar">
                        <van-image round width="40px" height="40px"
                            :src="`/api/getImg?url=${items.userParentContent}`" />
                    </div>

                    <div class="van-card__content">
                        <div>
                            <div class="van-card__title van-multi-ellipsis--l2">
                                <h3>{{ items.userParentNick }}</h3>
                            </div>
                            <div class="van-card__desc van-ellipsis">{{ items.ccontent }}</div>
                        </div>
                        <div class="van-card__bottom">
                            <div class="van-card__price">
                                <div><span class="van-card__price-currency">{{ items.ccreateTime }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="van-card__footer">
                    <van-tag @click="deleteIn(items.cid)" v-if="userId == items.replyPeopleId" type="danger">删除
                    </van-tag>
                </div>
            </div>
        </div>



        <van-dialog v-model="showComm" title="评论回复" show-cancel-button :beforeClose="beforeClose"
            confirmButtonColor="#1989fa">
            <van-cell-group>
                <van-field v-model="ccontent" label="内容" placeholder="请输入内容" />
            </van-cell-group>
        </van-dialog>



        <!-- 加载动画 -->
        <loading v-if="loadingStatus"></loading>
    </div>
</template>
<script>
import req from '../../../request/request'
import { getImg } from '@/request/MyFileReq';
import { Toast } from 'vant';
export default {
    name: 'Discuss',
    data() {
        return {
            // 默认开启加载动画
            loadingStatus: true,
            classInfos: [],
            classId: 1,
            className: '',
            show: 0,
            content: '',
            discusses: [],
            userId: this.$store.state.user.id,
            ccontent: '',
            showComm: false,
            id: ''
        };
    },
    methods: {
        intoComm(id) {
            this.showComm = true;
            this.ccontent = '';
            this.id = id;
        },
        beforeClose(res, next) {
            // console.log(res);
            if (res == "confirm") {
                req({
                    url: "updateComment",
                    method: "POST",
                    data: {
                        relationDiscussId: this.id,
                        content: this.ccontent,
                        replyPeopleId: this.userId,
                        userParentNick: this.$store.state.user.userNick,
                        userParentContent: this.$store.state.user.userAvatar
                    }
                }).then(res => {
                    this.getDiscuss();
                }).catch(err => {
                    // console.log(err);
                })
            }
            next()
        },
        addDiscuss() {
            req({
                url: "addDiscuss",
                method: "POST",
                data: {
                    relationClassId: this.classId,
                    relationStudentId: this.userId,
                    content: this.content
                }
            }).then(res => {
                this.getDiscuss();
                Toast('评论成功！')
            }).catch(err => {
                // console.log(err);
            })
        },
        deleteIn(id) {
            req({
                url: "deleteIn",
                method: "POST",
                data: {
                    id: id
                }
            }).then(res => {
                this.getDiscuss();
            }).catch(err => {
                // console.log(err);
            })
        },
        deleteOut(id) {
            req({
                url: "deleteOutDiscuss",
                method: "POST",
                data: {
                    id: id
                }
            }).then(res => {
                this.getDiscuss();
            }).catch(err => {
                // console.log(err);
            })
        },
        //获取头像
        async getImgM(url) {
            var tempUrl = await getImg('/api/getImg?url=' + url).then(url => {
                return url;
            })
            return tempUrl;
        },
        async initDiscusses(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].userAvatar != null) {
                    await this.getImgM(data[i].userAvatar).then(url => {
                        data[i].userAvatar = url;
                    });
                }
                if (data[i].comments.length > 0) {
                    for (var j = 0; j < data[i].comments.length; j++) {
                        if (data[i].comments[j].userParentContent != null) {
                            await this.getImgM(data[i].comments[j].userParentContent).then(url => {
                                data[i].comments[j].userParentContent = url;
                            });
                        }
                    }
                }
            }
            this.discusses = data;
            return data;
        },
        // 获取评论内容
        getDiscuss() {
            req({
                url: "getDiscuss",
                method: "POST",
                data: {
                    id: this.classId
                }
            }).then(res => {
                // this.initDiscusses(res.data.data);
                this.discusses = res.data.data;
            }).catch(err => {
                // console.log(err);
            })
        },
          // 更改班级列表
          changeClass(res) {
            for (var i = 0; i < this.classInfos.length; i++) {
                if (this.classInfos[i].value == res) {
                    this.practiceTitle = this.classInfos[i].text;
                    this.getDiscuss();
                }
            }

        },
        // 获取班级列表
        getTraining() {
            req({
                url: "getTraining",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.practiceTitle = res.data.data[0].practiceTitle;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].practiceTitle;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    this.getDiscuss()
                }
            }).catch(err => {
                // console.log(err);
            })
        },
        onClickLeft() {
            // if (this.show == 0) {
            //     this.$router.back(1)
            //     console.log("返回首页")
            // } else {
            //     // 返回上一级
            //     this.back();
            // }
            this.$router.back(1)
        },
        onClickRight() {
            // 回到首页
            this.$router.back(1)
        },
    },
    computed: {
    },
    mounted() {
        this.getTraining();
        setTimeout(async () => {
            this.loadingStatus = false;
        }, 1000);
    },
}
</script>
<style>
.bigcard {
    width: 90%;
    margin: 5px auto;
    border-radius: 15px;
}
</style>